<template>
    <!--考勤-->
    <div class="check-box">
        <div class="check-tool">
            <div class="serve-bottom">
                <div v-for="(item, index) in datas.applications" :key="index" class="serve-item">
                    <div class="imgbox">
                        <img :src="iconList[index]" width="40px" height="40px">
                    </div>
                <div class="name">{{ item.label }}</div>
            </div>
        </div>
        </div>
        <!--热线-->
        <div class="tel-hr">
            <div class="tel-content">
                <div class="tel-name">{{ $t('hrHotline')}}</div>
                <div class="tel-number">{{ datas.HrTelephone}}</div>
            </div>
        </div>
        <!--政策解读-->
        <div class="policy-eluc">
            <div class="policy-name">{{ $t('policyInterpretation')}}</div>
            <div class="policy-list" v-for="(item,index) in datas. policyInterpretation" :key="index" @click="attenDetail(item)">
                <div class="policy-list-item">
                    <div class="policy-item-left">
                        <div class="item-middle"> {{ item.title }} </div>
                        <div class="item-bottom"> {{ item.department }}
                            <span>{{ item.date }}</span>
                        </div>
                    </div>
                    <div class="policy-item-right">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 24 24" version="1.1">
                            <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                            <title>common/arrow_right_line</title>
                            <desc>Created with Sketch.</desc>
                            <defs>
                                <path d="M15.5445598,12.0087351 L7.39468103,3.85484631 C7.19952591,3.65960255 7.19952591,3.34314388 7.39468103,3.14790011 L7.39561765,3.14632067 C7.59083546,2.95101419 7.90741794,2.9509423 8.10272442,3.1461601 L8.10288498,3.14632067 L16.6022699,11.6502087 C16.6511318,11.6990929 16.68776,11.7555757 16.7121543,11.8158522 C16.7892188,11.9978221 16.7536071,12.2161632 16.605319,12.3645186 L16.6054796,12.3646792 L8.12065597,20.8536793 C7.92543819,21.0489858 7.6088557,21.0490577 7.41354921,20.8538399 L7.41338865,20.8536794 L7.41245203,20.8520999 C7.2172969,20.6568562 7.21729687,20.3403975 7.41245198,20.1451537 L15.5445598,12.0087351 L15.5445598,12.0087351 Z" id="path-1"/>
                            </defs>
                            <g id="common/arrow_right_line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <mask id="mask-2" fill="white">
                                    <use xlink:href="#path-1"/>
                                </mask>
                                <use id="Mask" fill="#000000" xlink:href="#path-1"/>
                            </g>
                        </svg>
                    </div> 
                </div>
            </div>
            <div class="view-more">
                <div class="view-text">{{ $t('viewMore')}}</div>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" viewBox="-2 -2 24 24" version="1.1">
                    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                    <title>common/arrow_right_line</title>
                    <desc>Created with Sketch.</desc>
                    <defs>
                        <path d="M15.5445598,12.0087351 L7.39468103,3.85484631 C7.19952591,3.65960255 7.19952591,3.34314388 7.39468103,3.14790011 L7.39561765,3.14632067 C7.59083546,2.95101419 7.90741794,2.9509423 8.10272442,3.1461601 L8.10288498,3.14632067 L16.6022699,11.6502087 C16.6511318,11.6990929 16.68776,11.7555757 16.7121543,11.8158522 C16.7892188,11.9978221 16.7536071,12.2161632 16.605319,12.3645186 L16.6054796,12.3646792 L8.12065597,20.8536793 C7.92543819,21.0489858 7.6088557,21.0490577 7.41354921,20.8538399 L7.41338865,20.8536794 L7.41245203,20.8520999 C7.2172969,20.6568562 7.21729687,20.3403975 7.41245198,20.1451537 L15.5445598,12.0087351 L15.5445598,12.0087351 Z" id="path-1"/>
                    </defs>
                    <g id="common/arrow_right_line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"/>
                        </mask>
                        <use id="Mask" fill="#000000" xlink:href="#path-1"/>
                    </g>
                </svg>
            </div>
        </div>
        <!--常用问题-->
        <div class="common-question">
            <div class="policy-eluc">
                <div class="policy-name">{{ $t('commonQuestions')}}</div>
                <div class="policy-list" v-for="(item,index) in datas. commonQuestions" :key="index" @click="extraQus(item)">
                    <div class="policy-list-item">
                        <div class="policy-item-left">
                            <div class="item-top"> {{ item.title }} </div>
                        </div>
                        <div class="policy-item-right">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 24 24" version="1.1">
                                <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                                <title>common/arrow_right_line</title>
                                <desc>Created with Sketch.</desc>
                                <defs>
                                    <path d="M15.5445598,12.0087351 L7.39468103,3.85484631 C7.19952591,3.65960255 7.19952591,3.34314388 7.39468103,3.14790011 L7.39561765,3.14632067 C7.59083546,2.95101419 7.90741794,2.9509423 8.10272442,3.1461601 L8.10288498,3.14632067 L16.6022699,11.6502087 C16.6511318,11.6990929 16.68776,11.7555757 16.7121543,11.8158522 C16.7892188,11.9978221 16.7536071,12.2161632 16.605319,12.3645186 L16.6054796,12.3646792 L8.12065597,20.8536793 C7.92543819,21.0489858 7.6088557,21.0490577 7.41354921,20.8538399 L7.41338865,20.8536794 L7.41245203,20.8520999 C7.2172969,20.6568562 7.21729687,20.3403975 7.41245198,20.1451537 L15.5445598,12.0087351 L15.5445598,12.0087351 Z" id="path-1"/>
                                </defs>
                                <g id="common/arrow_right_line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <mask id="mask-2" fill="white">
                                        <use xlink:href="#path-1"/>
                                    </mask>
                                    <use id="Mask" fill="#000000" xlink:href="#path-1"/>
                                </g>
                            </svg>
                        </div> 
                    </div>
                </div>
                <div class="view-more">
                    <div class="view-text">{{ $t('viewMore')}}</div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" viewBox="-2 -2 24 24" version="1.1">
                        <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
                        <title>common/arrow_right_line</title>
                        <desc>Created with Sketch.</desc>
                        <defs>
                            <path d="M15.5445598,12.0087351 L7.39468103,3.85484631 C7.19952591,3.65960255 7.19952591,3.34314388 7.39468103,3.14790011 L7.39561765,3.14632067 C7.59083546,2.95101419 7.90741794,2.9509423 8.10272442,3.1461601 L8.10288498,3.14632067 L16.6022699,11.6502087 C16.6511318,11.6990929 16.68776,11.7555757 16.7121543,11.8158522 C16.7892188,11.9978221 16.7536071,12.2161632 16.605319,12.3645186 L16.6054796,12.3646792 L8.12065597,20.8536793 C7.92543819,21.0489858 7.6088557,21.0490577 7.41354921,20.8538399 L7.41338865,20.8536794 L7.41245203,20.8520999 C7.2172969,20.6568562 7.21729687,20.3403975 7.41245198,20.1451537 L15.5445598,12.0087351 L15.5445598,12.0087351 Z" id="path-1"/>
                        </defs>
                        <g id="common/arrow_right_line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <mask id="mask-2" fill="white">
                                <use xlink:href="#path-1"/>
                            </mask>
                            <use id="Mask" fill="#000000" xlink:href="#path-1"/>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//mock数据真实服务注释删除
import datas from '../../mock/attendance/jsonData';
import i18n from '../../i18n';
import ackleave from '../../common/images/ackleave.png';
import addwork from '../../common/images/addwork.png';
import outwork from '../../common/images/outwork.png';
import bukaa from '../../common/images/bukaa.png';

export default {
    data() {
        return {
            datas,
            iconList:[ackleave,addwork,outwork,bukaa]
        }
    },
    created() {
        window.HWH5.setNavigationBarTitle({ title: this.$t('navTitle1')  });
        // 真实请求服务方法
        // const userId = this.$store.state.userInfo.userId
        // this.getDatas(userId)
    },
    methods: {
        //跳转考勤详情
        attenDetail(item) {
            console.log( item )
            if (item.type === 'attendancePolicy') {
                this.$router.push('./attendance')
            }
        },
        // 跳转时间详情
        extraQus(item) {
            if(item.type === 'overtimeEflow') {
                  this.$router.push('./extrawork')
            }
        },
           // 获取服务接口数据
        // getDatas(userId) {
        //   真实接口服务请求 需要将userInfo中的id作为参数传进去做数据请求
        //   const url = 'https://xxx?userId' + userId;
        //   const _headers = {
        //     'Content-Type': 'application/json'
        //   };
        //   HWH5.fetchInternet(url, {
        //     method: 'get',
        //     headers: _headers
        //   })
        //     .then(res => {
        //       res.json().then(reply => {
        //           //将接口返回数据赋值给热服务
        //           this.datas = reply
        //       });
        //     })
        //     .catch(error => {
        //       console.log('请求异常', error);
        //     });
        // }
    }
}
</script>
<style lang="less" scoped>
    .check-box {
        width: 100%;
        padding-top: 10px;
        box-sizing: border-box;
        .check-tool {
            height:94px;
            background: #fff;
            box-sizing: border-box;
            margin-bottom: 8px;
            box-shadow: 0 2px 4px 0 rgba(209,209,209,0.20);
            border-radius: 4px;
            padding: 16px 0;
            .serve-bottom {
                height:60px;
                width:100%;
                box-sizing: border-box;
                padding: 0 12px;
                display: flex;
                justify-content: space-between;
                .serve-item {
                    display: flex;
                    flex-wrap: wrap;
                    width: 25%;
                    text-align: center;
                    .imgbox {
                    width: 100%;
                    margin: 0 auto;
                    }
                    .icon {
                    height: 40px;
                    width: 40px;
                    border-radius: 6px;
                    }
                    .name {
                    text-align: center;
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    width:100%;
                    color: #343745;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    }
                }
                }
        }
        .tel-hr {
            height: 48px;
            background: #fff;
            line-height: 48px;
            box-sizing: border-box;
            margin-bottom: 8px;
            .tel-content {
                display: flex;
                justify-content: space-between;
                .tel-name {
                    width: 60%;
                    font-family: PingFangSC-Regular;
                    font-size: 16px;
                    color: #333333;
                    letter-spacing: 0;
                    text-align: left;
                    padding-left: 16px;
                }
                .tel-number {
                    width: 40%;
                    font-family: PingFangSC-Regular;
                    font-size: 16px;
                    color: #039BE5;
                    letter-spacing: 0;
                }
            }
        }
        .policy-eluc {
            background: #fff;
            box-sizing: border-box;
            padding: 6px 16px;
            margin-bottom:8px;
            .view-more {
                height:40px;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #999999;
                letter-spacing: 0;
                text-align: center;
                line-height: 40px;
                .view-text {
                    display: inline-block;
                }
            }
            .policy-name {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #999999;
                letter-spacing: 0;
            }
            .policy-list {
                .policy-list-item {
                    height:64px;
                    border-bottom:1px solid #E8E8E8;
                    padding:11px 0px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    .policy-item-left {
                        .item-middle {
                            font-family: PingFangSC-Regular;
                            font-size: 16px;
                            color: #333333;
                            letter-spacing: 0;
                        }
                        .item-top {
                            font-family: PingFangSC-Regular;
                            font-size: 16px;
                            color: #333333;
                            letter-spacing: 0;
                            line-height: 42px;
                        }
                        .item-bottom {
                            font-family: PingFangSC-Regular;
                            font-size: 12px;
                            color: #999999;
                            letter-spacing: 0;
                        }
                    }
                    .policy-item-right {
                        line-height: 44px;
                    }
                }
            }
        }
    }
</style> 